<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">
                &#xe624;
            </span>
        </div>
        <div class="header-input">
            <span class="iconfont  search-icon">&#xe632;</span>
            <div class="kw">输入城市/景点/游玩主题</div>
            <input type="text"/>
        </div>
        <router-link to="city">
           <div class="header-right">
              {{this.city}}
              <span class="iconfont arrow-icon">
                &#xe6aa;
              </span>
           </div>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState({
      city: 'city'// map this.city to store.state.city {{this.$store.state.city}}
    })
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/css/variables.styl';
    div{
         display: flex;
    }
    .header{
        background: $bgColor;
        width: 100%;
        height: 0.88rem;
        color: #fff;
    }
    .header .header-left{
        width: .8rem;
        height: 100%;
        line-height: .88rem;
        justify-content: center;
    }
    .header .header-input{
       position: relative;
       flex: 1;
       margin: .14rem 0;
    }
    .header .header-input .search-icon{
        position:absolute;
        top: .12rem;
        left: .2rem;
        color: #e4e7ea;
    }
    .header .header-input input{
        width:100%;
        height:100%;
        border-radius: .06rem;
    }
    .header .header-input .kw{
        position:absolute;
        top: .16rem;
        left: .65rem;
        color: #e4e7ee;
    }
    .header .header-right{
        min-width: 1.12rem;
        padding: 0 .1rem;
        height: 100%;
        line-height: .88rem;
        justify-content: center;
        color:#fff;
    }
    .header .header-right .arrow-icon{
        font-size:.24rem;
    }
</style>
